<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        /*
            浮动后，之前的布局等式就失效了

            元素脱离文档流后的特点：
                块元素：
                    1.块元素不再独占一行，而是水平排列
                    2.宽度和高度都被内容撑开
                行内元素：
                    设置浮动行内元素可以设置宽度和高度

                总结：脱离文档流后，块元素不再独占一行，宽高被内容撑开，行内元素变成块元素

                脱离文档流后，就不再需要区分行内和块

                作业：

         */
        .box1{
            width: 200px;
            height: 200px;
            background-color: tomato;
            float: left;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: greenyellow;
            float: left;
        }

        span{
            width: 200px;
            height: 200px;
            background-color: yellow;
            float: left;
        }

    </style>
</head>
<body>
<div class="box1">box1</div>
<!--<div class="box2"></div>-->

<span>我是一个小span</span>
</body>
</html>